// todo==========================发送ajax 获取文章内容===============================
const layer = layui.layer;
getArtCate()

function getArtCate() {
  axios.get('/my/article/cates')
    .then(res => {
      // console.log(res);
      // 遍历数组 生成tr td结构
      const htmlStr = res.data.data.map((item) => `
        <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id='${item.Id}'>编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id='${item.Id}'>删除</button>
            </td>
        </tr>
`).join('')
      $('#tbody').html(htmlStr)
    })
}


// todo==============================添加类别===========================
const addFormStr = `
<form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>
`
const editFormStr = `
<form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>`
let indexAddForm
let indexEditForm
$('#btnAddCate').click(function () {
  // 弹出框
  indexAddForm = layer.open({
    type: 1, //页面层
    content: addFormStr, //内容
    title: '添加文章类别', //标题
    area: ['500px', '300px'] //宽高
  });
  //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。       
})
// !表单的submit事件注册写法有问题 ==》由于form表单是动态创建 所以需要使用事件委托

const form = layui.form
$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()

  const data = $(this).serialize()

  axios.post('/my/article/addcates', data)
    .then(({
      data: {
        status,
        message
      }
    }) => {
      // console.log(status,message)
      if (status !== 0) {
        return layer.msg(message)
      }
      // 提示成功
      layer.msg(message)
      // 关闭弹出层
      layer.close(indexAddForm)
      // 重新获取所有分类渲染展示到页面中
      getArtCate()
    })
})

$('#tbody').on('click', '.btn_edit', function () {
  const Id = $(this).attr('data-id')
  // console.log(Id);
  axios.get('/my/article/cates/' + Id)
    .then(({
      data
    }) => {
      // console.log(data)
      form.val('editForm', data.data)
      getArtCate()
    })
  indexEditForm = layer.open({
    type: 1, //页面层
    content: editFormStr, //内容
    title: '添加文章类别', //标题
    area: ['500px', '300px'] //宽高
  });
})


// 修改
$('body').on('submit', '#EditForm', function (e) {
  e.preventDefault()

  const data = $(this).serialize()

  axios.post('/my/article/updatecate', data)
    .then(({
      data
    }) => {
      console.log(data)
      // if(status!==0){
      //     return layer.msg(message)
      // }
      // // 提示成功
      // layer.msg(message)
      // // 关闭弹出层
      // layer.close(indexEditForm)
      // // 重新获取所有分类渲染展示到页面中
      // getArtCate()
    })
})

// 删除

$('#tbody').on('click', '.btn_delete', function () {
  const Id = $(this).attr('data-id')
  console.log(Id);
  axios.get('/my/article/deletecate/' + Id)
    .then(res => {
      // console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.msg(res.data.message)
      getArtCate()
    })
})